<template>
	<view class="feedback">
		<uni-forms ref="formRef" :rules="rules" :model="formData">
			<uni-forms-item name="title">
				<view class="desc">
					<view class="label"> 问题类型 </view>
					<textarea v-model="formData.title" maxlength="100" placeholder="请填写问题类型" placeholder-style="color: #C4C4C4;font-size: 14px;" />
				</view>
			</uni-forms-item>
			<uni-forms-item name="content">
				<view class="desc">
					<view class="label"> 问题描述 </view>
					<textarea v-model="formData.content" maxlength="1000" placeholder="请填写您需要反馈的内容..." placeholder-style="color: #C4C4C4;font-size: 14px;" />
					<view class="num"> {{ formData.content.length }}/1000 </view>
				</view>
			</uni-forms-item>
			<uni-forms-item name="pic">
				<view class="proof">
					<view class="label"> 上传凭证 </view>
					<ChooseBtn @choose="chooseImg" v-if="imgUrl==''"/>
					<image :src="imgUrl" class="img" v-else />
				</view>
			</uni-forms-item>
		</uni-forms>
		<!-- 联系人 -->
		<view class="contact">
			<view class="item">
				<view class="label"> 联系人 </view>
				<view class="value"> {{ userInfo.name }} </view>
			</view>
			<view class="item">
				<view class="label"> 联系方式 </view>
				<view class="value"> {{ userInfo.mobile }} </view>
			</view>
		</view>
		<!-- btn -->
		<view class="btn" @tap="submit"> 确认提交 </view>
		<Select ref="selectRef" :arr="arr" @selected="selectedType"/>
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue';
	import ChooseBtn from '@/components/ChooseBtn.vue';
	import Select from '@/components/BottomSelectPopup.vue'
	import { isMobile, isNull } from '@/utils/valdate.js'
	import { useCommStore, useUserStore } from '@/store/index.js'
	import { FeedBackApi } from '@/service/index.js'
	const formRef = ref()
	const selectRef = ref()
	const arr = computed(() => {
		const { comm } = useCommStore()
		return comm.fankui_msg
	})
	const userInfo = computed(() => {
		const { userInfo } = useUserStore()
		return userInfo
	})
	const formData = ref({
		title: '',   // 反馈类型
		content: '', // 反馈内容
		pic: '',     // 图片 单图
	})
	const imgUrl = ref('') // 此字段进攻展示
	const rules = {
		title: isNull('问题类型'),
		content: isNull('问题内容'),
		pic: isNull('反馈凭证')
	}
	const selectedType = (e) => {
		formData.value.title = e
		selectRef.value.close()
	}
	const chooseImg = (e) => {
		formData.value.pic = e.id
		imgUrl.value = e.img_url
	}
	const submit = () => {
		const { userInfo, member } = useUserStore()
		formRef.value.validate().then(() => {
			let params ={
				...formData.value,
				name: userInfo.name,
				phone: member.mobile
			}
			FeedBackApi(params).then(res => {
				uni.navigateBack()
			})
		})
	}
</script>

<style lang="scss" scoped>
	// 建议反馈
	.feedback {
		padding: 10px 12px;
		box-sizing: border-box;
		.uni-forms-item {
			margin-bottom: 0;
		}
		:deep(.uni-forms-item__error) {
			left: 0;
			top: 100%;
			right: 12px;
			font-size: 12px;
			text-align: right;
			padding-bottom: 3px;
			transform: translateY(-150%);
		}
		.type, .desc, .proof, .contact {
			width: 100%;
			border-radius: 10px;
			padding: 0 16px;
			background-color: #fff;
			box-sizing: border-box;
			margin-bottom: 10px;
			.label {
				color: #333333;
				font-size: 16px;
				font-weight: 400;
			}
			.value {
				flex: 1;
				color: #666666;
				font-size: 14px;
				font-weight: 400;
				display: flex;
				align-items: center;
				justify-content: end;
				.right {
					width: 14px;
					height: 14px;
					margin-left: 5px;
				}
			}
		}
		.type {
			height: 50px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.desc {
			display: flex;
			flex-direction: column;
			padding-bottom: 16px;
			.label {
				margin: 16px 0 9px;
			}
			textarea {
				flex: 1;
				width: 100%;
				min-height: 90px;
				font-weight: 400;
				font-size: 14px;
				color: #C4C4C4;
				line-height: 20px;
			}
			.num {
				color: #C4C4C4;
				font-size: 14px;
				font-weight: 400;
				margin-top: 10px;
				text-align: right;
			}
		}
		.proof {
			padding: 20px 16px;
			box-sizing: border-box;
			.label {
				margin-bottom: 15px;
			}
			.img {
				width: 74px;
				height: 74px;
				border-radius: 10px;
			}
		}
		.contact {
			.item {
				height: 50px;
        width: calc(750rpx - 56px);
				display: flex;
				justify-content: space-between;
				align-items: center;
				&:nth-of-type(1) {
					border-bottom: 1px solid #eeeeee;
				}
        .value {
          margin-left: 20px;
        }
			}
		}
		.btn {
			height: 50px;
			color: #FFFFFF;
			font-size: 17px;
			margin-top: 20px;
			font-weight: 500;
			line-height: 50px;
			text-align: center;
			background: #FF3B1E;
			border-radius: 106px
		}
	}
</style>